<template>
  <page-wrap back hide-tab title="面试选题" stay-still :bg-color="uNavColor" >
    <InterViewNavbg/>
    <view>
      <view class="search">
        <u-search
          placeholder="请输入面试标题"
          class="library-u-search"
          v-model="keyword"
          height="80"
          bg-color="#FFFFFF;"
          maxlength="20"
          :show-action="true"
          :clearabled="false"
          @search="handleSearch"
          @custom="handleSearch"
        ></u-search>
      </view>
      <scroll-view
        class="scrollView"
        scroll-y
        enable-flex
        @scrolltolower="loadMore"
        :refresher-triggered="triggered"
      >
        <view class="allContaienr" @click="clickCell(item)" v-for="(item, index) in list" :key="index">
          <block v-if="selectedItemIds.includes(item.questionId)">
            <text class="itemName1">{{ item.questionTitle }}</text>
            <image style="width: 40rpx;height: 40rpx;" mode="aspectFill" :src="selectedIcon"></image>
          </block>
          <text v-else class="itemName">{{ item.questionTitle }}</text>
        </view>

        <u-loadmore
          v-if="list.length > 0 || !loaded"
          class="list-more"
          :status="moreLoading"
          :load-text="loadText"
        />
        <Empty
          v-if="loaded && list.length <= 0"
          :baseImg="emptyImg"
          text="暂无数据"
          :fontWeight="400"
        />
      </scroll-view>
      <view class="tool">
        <!-- <u-image class="tool-more"
            width="50rpx"
            height="50rpx"
            shape="circle"
            :src="aiInterviewOldImg"
            :lazy-load="true"
            @tap="clickMore"
          ></u-image> -->
        <view class="tool-textContent">
          <text style="margin-left: 40rpx;">已选题目： <text>{{ selectedItems.length }}</text></text>
          <text class="tool-btn-check" @tap="clickAllSelected">查看明细</text>
          <view class="tool-btn-comp" @tap="clickNext">完成创建</view>
        </view>
      </view>

      <u-popup
      v-model="showQuestions"
      mode="bottom"
      height="60%"
      border-radius="14"
    >
      <view class="list-content">
        <view class="content-title">已选题目</view>
        <scroll-view scroll-y="true" style="height: auto; background-color: rgb(240, 239, 239);">
          <view class="allContaienr" @click="clickCell(item)" v-for="(item, index) in selectedItems" :key="index">
            <text class="itemName">{{ item.questionTitle }}</text>
            <u-image width="40rpx" height="40rpx" :src="aiInterviewDelImg" :lazy-load="true"></u-image>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    </view>
  </page-wrap>
</template>

<script>
import Empty from "@/components/Empty.vue";
import InterviewCell from "./components/InterviewCell.vue";
import { getCompanyInterviewIssuesDB,getCompanyInterviewCreate,getCompanyInterviewIssues } from "@/api/modules/company";
import InterViewNavbg from "./components/InterViewNavbg.vue";
export default {
  components: {
    Empty,
    InterviewCell,
    InterViewNavbg
  },
  data() {
    return {
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
      companyId: uni.getStorageSync("company-id"),
      // personId: "21907407",
      // companyId: "1001",

      showQuestions: false,
      keyword: "",
      list: [],
      selectedItems: [],
      selectedItemIds: [],
      info: {
        id: "",
        title: "",
        career: {
          // ylPositionId: 1233,
          // ylPositionName: "java开发工程师",
        },
        beginDate: "",
        endDate: "",
      },
      pageParams: {
        pageNo: 1,
        pageSize: 10,
      },
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      selectedIcon:this.$imgBaseSelf + "library/selected.png",
      aiInterviewOldImg: this.$imgBaseSelf + "interview/aiInterviewOld.png",
      aiInterviewDelImg: this.$imgBaseSelf + "interview/aiInterviewDel.png",

      finished: false,
      loading: false,
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      loaded: false,
    };
  },
  onLoad(options) {
    console.log("🚀 ~ file: interviewChoice.vue:150 ~ 面试选题-onLoad接收数据 ~ options:", options)
    if (options && options.info) {
      const obj = JSON.parse(options.info)
      this.info = obj;
      console.log("🚀 ~ file: interviewChoice.vue:147 ~ onLoad ~ this.info:", this.info)
      if (options.isCopy == 1) {
        this.getQuestions(obj.interviewNumber);
      }
    }
    this.getData(false);
  },
  methods: {
    loadMore() {
      this.getData(true);
    },
    onRestore() {
      this.triggered = false;
      this._triggered = false;
    },
    onRefresh() {
      if (this._triggered) return;
      this._triggered = true;

      if (!this.triggered) {
        this.triggered = true;
      }
      this.getData(false);
    },
    
    handleSearch(value) {
      this.keyword = value;
      this.getData(false);
    },

    // 添加/删除题目
    clickCell(item) {
      let questionId = item.questionId;
      var a = this.selectedItemIds;
      var b = this.selectedItems;
      
      const hasSameElement = a.includes(questionId);
      if (hasSameElement) {
        const index = a.indexOf(questionId)
        a.splice(index, 1);
        b.splice(index, 1);
      } else {
        a.push(questionId);
        b.push(item);
      }
    },
    clickMore() {
      uni.navigateTo({
        url: "/pagesSub/companyCenter/interviewAI/interviewHistory?info=" + JSON.stringify(this.info),
      });
    },
    clickAllSelected() {
      this.showQuestions = true;
    },

    // 获取全部面试题
    getData(isMore) {
      if (!this.info.career.ylPositionId) return;
      if (this.moreLoading == "loading") return;
      if (this.moreLoading == "nomore" && isMore) {
        return;
      }
      if (!isMore) {
        this.pageParams.pageNo = 1; // 刷新数据
      }
      const params = {
        questionTitle: this.keyword,
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        ylPositionId: this.info.career.ylPositionId,
      };
      this.moreLoading = "loading";

      getCompanyInterviewIssuesDB(params).then((res) => {
        console.log("🚀 ~ file: interviewChoice.vue:191 ~ 获取全部面试题 ~ res:", res)
        this.moreLoading = "loadmore";
        this.loaded = true;
        if (res.code == 200) {
          if (isMore) {
            this.list.push(...res.data);
          } else {
            this.list = res.data;
          }
          this.pageParams.pageNo++;
          if (this.pageParams.pageNo > res.pageparam.pages) {
            this.moreLoading = "nomore";
          }
        } else {
          this.moreLoading = "nomore";
          uni.showToast({
            title: res.status_desc,
            icon: "none",
          });
        }
      })
      .catch((e) => {
        console.log(e);
        this.moreLoading = "nomore";
      })
      .finally(() => {
        this.triggered = false;
        this._triggered = false;
      });
    },

    // 获取复制的面试题
    getQuestions(number) {
      let param = {
        interviewNumber: number,
        hasAnswer:"false"
      };
      getCompanyInterviewIssues(param).then((res) => {
        console.log("🚀 ~ file: interviewChoice.vue:226 ~ 复制的面试题 ~ res:", res)
        if (res && res.code == 200) {
          let data = res.data;
          var a = this.selectedItemIds;
          var b = this.selectedItems;

          for (let item of res.data) {
            a.push(item.questionId);
            b.push(item);
          }
        } else {
          uni.showToast({
            title: res.status_desc,
            icon: "none",
          });
        }
      });
    },

    // 完成创建
    clickNext() {
      if (this.selectedItemIds.length == 0) {
        uni.showToast({
          title: "请选择面试题目",
          icon: "none",
        });
        return;
      }

      const params = {
        companyId: this.companyId,
        userId: this.personId,
        interviewTitle: this.info.interviewTitle,
        ylPositionId: this.info.career.ylPositionId,
        validStartTime: this.info.validStartTime,
        validEndTime: this.info.validEndTime,
        questionIds: JSON.stringify(this.selectedItemIds),
      };
      getCompanyInterviewCreate(params).then((res) => {
        console.log("🚀 ~ file: interviewChoice.vue:279 ~ getCompanyInterviewIssuesDB ~ res:", res)
        if (res.code == 200) {
          uni.reLaunch({
            url: "/pagesSub/companyCenter/interviewAI/interviewHome",
          });
        } else {
          uni.showToast({
            title: res.status_desc,
            icon: "none",
          });
        }
      });
    },

    // 历史面试题
    // getHistory() {
    //   const params = {
    //     pageNo: this.pageParams.pageNo,
    //     pageSize: this.pageParams.pageSize,
    //     ylPositionId: this.info.id,
    //     companyId: this.companyId,
    //   };
    //   this.moreLoading = "loading";

    //   getCompanyInterviewHistory(params).then((res) => {
    //     this.moreLoading = "loadmore";
    //     this.loaded = true;
    //     if (res.code == 200) {
    //       if (isMore) {
    //         this.list.push(...res.data);
    //       } else {
    //         this.list = res.data;
    //       }
    //       this.pageParams.pageNo++;
    //       if (this.pageParams.pageNo > res.pageparam.pages) {
    //         this.moreLoading = "nomore";
    //       }
    //     } else {
    //       this.moreLoading = "nomore";
    //       uni.showToast({
    //         title: res.status_desc,
    //         icon: "none",
    //       });
    //     }
    //   })
    //   .catch((e) => {
    //     console.log(e);
    //     this.moreLoading = "nomore";
    //   })
    //   .finally(() => {
    //     this.triggered = false;
    //     this._triggered = false;
    //   });
    // }


  },
};
</script>

<style lang="scss" scoped>
.search {
  margin: 32rpx 32rpx 10rpx;
}

.scrollView {
  box-sizing: border-box;
  height: calc(100vh - 64rpx - 150rpx - 230rpx);
}

.allContaienr {
  display: flex;
  background: white;
  border-radius: 32rpx;
  justify-content: space-between;
  flex-direction: row;
  padding: 32rpx;
  margin: 32rpx;
  align-items: center;
  .itemName {
    font-size: 16px;
    color: #222222;
  }
  .itemName1 {
    font-size: 16px;
    color: #a72727;
  }

  .itemRightBtn {
    display: flex;
    align-items: center;
    color: #066bff;
  }
}

.tool {
  display: flex;
  height: 150rpx;
  position: fixed;
  bottom: 50rpx;
  left: 30rpx;
  right: 30rpx;
  background-color: rgb(246, 248, 250);
  align-items: center;
  z-index: 1;
  .tool-more {
    height: 50rpx;
    width: 50rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
  }
  .tool-textContent {
    background-color: white;
    height: 90rpx;
    border-radius: 45rpx;
    position: absolute;
    right: 0rpx;
    left: 0rpx;
    align-items: center;
    display: flex;
    overflow: hidden;

    .tool-btn-comp {
      background: #f75a3e;
      position: absolute;
      right: 0;
      height: 100%;
      display: flex;
      align-items: center;
      width: 200rpx;
      justify-content: center;
      color: white;
    }
    .tool-btn-check {
      position: absolute;
      right: 220rpx;
      height: 100%;
      display: flex;
      align-items: center;
      color: #f75a3e;
    }
  }
}


.list-content {
  background-color: rgb(240, 239, 239);
  height: 100%;
  .content-title {
    height: 120rpx;
    font-weight: bold;
    text-align: center;
    padding-top: 50rpx;
    font-size: 36rpx;
  }
}
</style>
